<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>router</title>
</head>
<body>
  <a href="#/test1">test1</a><br>
  <button onclick="location.hash = '#/test2'">test2</button><br>

  <button onclick="pushState('test3')">pushState</button> <br>
  <button onclick="pushState('test4')">pushState</button> <br>
  <button onclick="replaceState('test5')">replaceState</button> <br>
  <button onclick="replaceState('test6')">replaceState</button> <br>
  <button onclick="readState()">readState</button> <br>
  
  <script>


    // location
    console.log(location.hash)
    window.onhashchange = () => {
      console.log('hashchange', location.hash)
      console.log('根据当前hash路径来查找对应的路由组件来显示')
    }

    // history
    function pushState (path) {
      history.pushState({'name': 'tom' + Date.now()}, '', path)
    }

    function replaceState (path) {
      history.replaceState({'age': 1}, '', path)
    }

    function readState () {
      console.log(history.state)
      console.dir(history)
    }

    window.onpopstate = function(event) {
      console.log("location: " + document.location + ", state: " + JSON.stringify(event.state));
    };
  </script>
</body>
</html>